
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jq.date.js"></script>  
            <link rel="stylesheet" type="text/css" href="../css/ui.datepicker.css"/>
        <title>JSP Page</title>
    </head>
     <script type="text/javascript" language="javascript">
                var open_cur = 0;
                $j = jQuery.noConflict();
                $j(document).ready(function(){
                    $j('input#start').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true }); 
                    $j('input#end').datepicker({ dateFormat: 'dd/mm/yy', showOn: 'button', buttonImage: '../images/calenda_icon.gif', buttonImageOnly: true }); 
                });
     </script>
    <style>
        .itemdiv{
            background-color: white;
            width: 100%;
            border-bottom: 1px solid gray;
            height: 25px;
            line-height: 25px;float: left;
        }
        .itemdivsear{
            margin-top: 5px;
            background-color: white;
            width: 100%;
            border-bottom: 1px solid gray;
            height: 25px;
            line-height: 25px;
            float: left;
        }
        .olll{
            background-color: #E0EFFC;
        }
    </style>
    <body>
        <f:view>
            <h:form>
                <div class="itemdivsear">
                    <div style="float: left;">
                        <input style="width: 74px;float: left;margin-left: 0px;" value="<h:outputText value="#{EmpBean.startDT}"><f:convertDateTime pattern="dd/MM/yyyy"/> 
                               </h:outputText>" type="text" id="start" name="start" class="" />
                    </div>
                    <div style="float: left;">
                        <input style="width: 74px;float: left;margin-left: 20px;" value="<h:outputText value="#{EmpBean.endDT}"><f:convertDateTime pattern="dd/MM/yyyy"/> 
                               </h:outputText>" type="text" id="end" name="end" class="" />
                    </div>
                    <div style="float: left;">
                        <h:panelGroup id="submitStatus">
                            <a4j:commandButton style="float:left;margin-left:14px;" reRender="listBr"  actionListener="#{EmpBean.reloadStatusBr}" value="Tìm" styleClass="buttonsave">

                            </a4j:commandButton>
                        </h:panelGroup >

                    </div>



                </div>
                        <h:panelGroup id="listBr">
                            
                     
               <a4j:repeat  value="#{EmpBean.allListN100DAC}" var="item" rowKeyVar="row" >


        <div class="itemdiv <h:outputText value="olll" rendered="#{row%2==0}"/>"> <h:graphicImage style="margin-top:2px;" value="../images/gifts-icon.png"/>  <h:outputText style="font-weight:bold;font-size:11px;margin-left:5px;" value="#{item.hoten}"/> &nbsp;(<h:outputText style="font-style:italic;" value="#{item.nd118bir}"><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText>)</br></div>

    </a4j:repeat>
                               </h:panelGroup>
            </h:form>
        </f:view>
    </body>
</html>

